// 获取操作对象
var ul1 = document.querySelector(".imgs>ul")
var pagination1 = document.querySelector(".pagination1");
// console.log(pagination1);







//设置列表页以及分页器
(async function () {
    var txt = await PromiseAjax({
        url: "./php/list.php"

    })
    // console.log(txt)
    var ar1 = eval("(" + txt + ")")

    // 创建分页器对象
    var o1 = {
        pageInfo: {
            pagenum: 1, //当前显示的页码
            pagesize: 12, //每页显示的条数
            totalsize: ar1.length, //总条数
            totalpage: Math.ceil(ar1.length / 12) //总页数
        },
        textInfo: {
            first: "首页", //首页
            prev: "上一页", //上一页
            next: "下一页", //下一页
            last: "尾页" //尾页
        }
    }

    new Pagination(pagination1, o1, (m) => {
        // console.log(m);
        var ar2 = ar1.slice((m - 1) * 12, m * 12)
        // 创建新字符串拼接数据
        var str = ""
        ar2.forEach(item => {
            str += `
                  <li onmouseover="fn1()"><a href="./xiangqingye.html?id=${item.cart_id}"><img src="${item.goods_img1}" alt=""style="display: none;"><img src="${item.goods_img3}" alt="" ></a>
                            <a href="#" class="title">
                                <span>${item.goods_name}</span>
                                <span>5.5折</span>
                            </a>
                            <p class="price">
                                <span>￥${item.goods_price}</span>
                            </p>
                            <a href="./xiangqingye.html?id=${item.cart_id}" class="buy">快速购买</a>
                        </li>
            `
        })
        ul1.innerHTML = str

    })

})()


// 获取操作对象设置树形菜单
var box = document.querySelector(".listmenu")
var uls = box.querySelectorAll("ul")
// 设置树形菜单
box.onclick = function (e) {
    var e = e || window.event
    var tg = e.target || e.srcElement
    if (tg.nodeName == "SPAN") {
        // 设置所有ul隐藏
        for (let i = 0; i < uls.length; i++) {
            uls[i].style.display = "none"
        }
        // 点击时显示下一个兄弟内容
        tg.nextElementSibling.style.display = "block"
    }
}







// 设置模糊查询
var search = document.querySelector(".search")
var btn = search.querySelector("button")
var inp = search.querySelector("input")
// 给按钮绑定点击事件
btn.onclick = function () {
    // 获取输入框的内容
    var val = inp.value;
    // 创建ajax函数
    (async function () {
        var txt = await PromiseAjax({
            url: "./php/list-search.php",
            data: `value=${val}`
        })
        // 把传入参数转为数组
        var ar1 = eval("(" + txt + ")")
        // 判断数据是否大于12条
        if (ar1.length > 12) {
            pagination1.style.display = "flex"
            // 配置分页器信息
            var o1 = {
                pageInfo: {
                    pagenum: 1, //当前显示的页码
                    pagesize: 12, //每页显示的条数
                    totalsize: ar1.length, //总条数
                    totalpage: Math.ceil(ar1.length / 12) //总页数
                },
                textInfo: {
                    first: "首页", //首页
                    prev: "上一页", //上一页
                    next: "下一页", //下一页
                    last: "尾页" //尾页
                }
            }

            new Pagination(pagination1, o1, (m) => {
                // console.log(m);
                var ar2 = ar1.slice((m - 1) * 12, m * 12)
                var str = ""
                ar2.forEach(item => {
                    str += `
                         <li onmouseover="fn1()"><a href="./xiangqingye.html?id=${item.cart_id}"><img src="${item.goods_img1}" alt=""></a>
                                   <a href="#" class="title">
                                       <span>${item.goods_name}</span>
                                       <span>5.5折</span>
                                   </a>
                                   <p class="price">
                                       <span>￥${item.goods_price}</span>
                                   </p>
                                   <a href="./xiangqingye.html?id=${item.cart_id}" class="buy">快速购买</a>
                               </li>
                   `
                })
                ul1.innerHTML = str

            })
        } else {
            pagination1.style.display = "none"
            var str = ""
            ar1.forEach(item => {
                str += `
                     <li onmouseover="fn1()"><a href="./xiangqingye.html?id=${item.cart_id}"><img src="${item.goods_img1}" alt=""></a>
                               <a href="#" class="title">
                                   <span>${item.goods_name}</span>
                                   <span>5.5折</span>
                               </a>
                               <p class="price">
                                   <span>￥${item.goods_price}</span>
                               </p>
                               <a href="./xiangqingye.html?id=${item.cart_id}" class="buy">快速购买</a>
                           </li>
               `
            })
            ul1.innerHTML = str
        }
    })()
}


// 设置列表图片显示效果
function fn1() {
    var box = document.querySelector(".imgs")
    // console.log(box)
    var imgs = box.querySelectorAll("img")
    // 给每个img绑定移入事件
    for (let i = 0; i < imgs.length; i++) {
        imgs[i].onmouseenter = function () {
            // 获取当前的src属性
            var src3 = this.getAttribute("src")
            var src1 = src3.replace("p3.jpg", "p1.jpg")
            // // 设置当前src属性
            this.setAttribute("src", src1)
        }
    }
    // 给每个img绑定移出事件
    for (let i = 0; i < imgs.length; i++) {
        imgs[i].onmouseleave = function () {
            // 获取当前的src属性
            var src3 = this.getAttribute("src")
            var src1 = src3.replace("p1.jpg", "p3.jpg")
            // // 设置当前src属性
            this.setAttribute("src", src1)
        }
    }
}


// 设置栏目头
var goods = document.querySelector(".goods")
var inps = goods.querySelectorAll("input")
var spans= goods.querySelectorAll("span")
var a=0 //设置点击一次为奇数，点击第二次为偶数

// 绑定点击事件
goods.onclick = function (e) {
    var e = e || window.event
    var tg = e.target || e.srcElement
    
  
    // 设置价格确定按钮框
    if (tg.innerHTML == "确定") {   
        // 获取输入框中的内容
        var v1 = inps[0].value
        var v2 = inps[1].value;
        // 通过ajax来获取数据库信息
        (async function () {
            var txt = await PromiseAjax({
                url: './php/list-price1.php',
                data: `value1=${v1}&value2=${v2}`
            })
            // 把传入参数转为数组
            var ar1 = eval("(" + txt + ")")
            // 判断数据是否大于12条
            if (ar1.length > 12) {
                pagination1.style.display = "flex"
                // 配置分页器信息
                var o1 = {
                    pageInfo: {
                        pagenum: 1, //当前显示的页码
                        pagesize: 12, //每页显示的条数
                        totalsize: ar1.length, //总条数
                        totalpage: Math.ceil(ar1.length / 12) //总页数
                    },
                    textInfo: {
                        first: "首页", //首页
                        prev: "上一页", //上一页
                        next: "下一页", //下一页
                        last: "尾页" //尾页
                    }
                }

                new Pagination(pagination1, o1, (m) => {
                    // console.log(m);
                    var ar2 = ar1.slice((m - 1) * 12, m * 12)
                    var str = ""
                    ar2.forEach(item => {
                        str += `
                         <li onmouseover="fn1()"><a href="./xiangqingye.html?id=${item.cart_id}"><img src="${item.goods_img1}" alt=""></a>
                                   <a href="#" class="title">
                                       <span>${item.goods_name}</span>
                                       <span>5.5折</span>
                                   </a>
                                   <p class="price">
                                       <span>￥${item.goods_price}</span>
                                   </p>
                                   <a href="./xiangqingye.html?id=${item.cart_id}" class="buy">快速购买</a>
                               </li>
                   `
                    })
                    ul1.innerHTML = str

                })
            
            } else {
                pagination1.style.display = "none"
                var str = ""
                ar1.forEach(item => {
                    str += `
                     <li onmouseover="fn1()"><a href="./xiangqingye.html?id=${item.cart_id}"><img src="${item.goods_img1}" alt=""></a>
                               <a href="#" class="title">
                                   <span>${item.goods_name}</span>
                                   <span>5.5折</span>
                               </a>
                               <p class="price">
                                   <span>￥${item.goods_price}</span>
                               </p>
                               <a href="./xiangqingye.html?id=${item.cart_id}" class="buy">快速购买</a>
                           </li>
               `
                })
                ul1.innerHTML = str
            }
        })()
    }
}

// 设置价格排序
spans[2].onclick=function(){
    a++
    // 获取输入框中的内容
    var v1 = inps[0].value
    var v2 = inps[1].value;
    // 点击一次为降序
    if(a%2==1){
         // 通过ajax来获取数据库信息
        (async function () {
            var txt = await PromiseAjax({
                url: './php/list-price2.php',
                data: `value1=${v1}&value2=${v2}&sort=desc`
            })
            // 把传入参数转为数组
            var ar1 = eval("(" + txt + ")")
            // 判断数据是否大于12条
            if (ar1.length > 12) {
                pagination1.style.display = "flex"
                // 配置分页器信息
                var o1 = {
                    pageInfo: {
                        pagenum: 1, //当前显示的页码
                        pagesize: 12, //每页显示的条数
                        totalsize: ar1.length, //总条数
                        totalpage: Math.ceil(ar1.length / 12) //总页数
                    },
                    textInfo: {
                        first: "首页", //首页
                        prev: "上一页", //上一页
                        next: "下一页", //下一页
                        last: "尾页" //尾页
                    }
                }

                new Pagination(pagination1, o1, (m) => {
                    // console.log(m);
                    var ar2 = ar1.slice((m - 1) * 12, m * 12)
                    var str = ""
                    ar2.forEach(item => {
                        str += `
                     <li onmouseover="fn1()"><a href="./xiangqingye.html?id=${item.cart_id}"><img src="${item.goods_img1}" alt=""></a>
                               <a href="#" class="title">
                                   <span>${item.goods_name}</span>
                                   <span>5.5折</span>
                               </a>
                               <p class="price">
                                   <span>￥${item.goods_price}</span>
                               </p>
                               <a href="./xiangqingye.html?id=${item.cart_id}" class="buy">快速购买</a>
                           </li>
               `
                    })
                    ul1.innerHTML = str

                })
            } else {
                pagination1.style.display = "none"
                var str = ""
                ar1.forEach(item => {
                    str += `
                 <li onmouseover="fn1()"><a href="./xiangqingye.html?id=${item.cart_id}"><img src="${item.goods_img1}" alt=""></a>
                           <a href="#" class="title">
                               <span>${item.goods_name}</span>
                               <span>5.5折</span>
                           </a>
                           <p class="price">
                               <span>￥${item.goods_price}</span>
                           </p>
                           <a href="./xiangqingye.html?id=${item.cart_id}" class="buy">快速购买</a>
                       </li>
           `
                })
                ul1.innerHTML = str
            }
        })()
    }else{
        // 通过ajax来获取数据库信息
        (async function () {
            var txt = await PromiseAjax({
                url: './php/list-price2.php',
                data: `value1=${v1}&value2=${v2}&sort=asc`
            })
            // 把传入参数转为数组
            var ar1 = eval("(" + txt + ")")
            // 判断数据是否大于12条
            if (ar1.length > 12) {
                pagination1.style.display = "flex"
                // 配置分页器信息
                var o1 = {
                    pageInfo: {
                        pagenum: 1, //当前显示的页码
                        pagesize: 12, //每页显示的条数
                        totalsize: ar1.length, //总条数
                        totalpage: Math.ceil(ar1.length / 12) //总页数
                    },
                    textInfo: {
                        first: "首页", //首页
                        prev: "上一页", //上一页
                        next: "下一页", //下一页
                        last: "尾页" //尾页
                    }
                }

                new Pagination(pagination1, o1, (m) => {
                    // console.log(m);
                    var ar2 = ar1.slice((m - 1) * 12, m * 12)
                    var str = ""
                    ar2.forEach(item => {
                        str += `
                    <li onmouseover="fn1()"><a href="./xiangqingye.html?id=${item.cart_id}"><img src="${item.goods_img1}" alt=""></a>
                              <a href="#" class="title">
                                  <span>${item.goods_name}</span>
                                  <span>5.5折</span>
                              </a>
                              <p class="price">
                                  <span>￥${item.goods_price}</span>
                              </p>
                              <a href="./xiangqingye.html?id=${item.cart_id}" class="buy">快速购买</a>
                          </li>
              `
                    })
                    ul1.innerHTML = str

                })
            } else {
                pagination1.style.display = "none"
                var str = ""
                ar1.forEach(item => {
                    str += `
                <li onmouseover="fn1()"><a href="./xiangqingye.html?id=${item.cart_id}"><img src="${item.goods_img1}" alt=""></a>
                          <a href="#" class="title">
                              <span>${item.goods_name}</span>
                              <span>5.5折</span>
                          </a>
                          <p class="price">
                              <span>￥${item.goods_price}</span>
                          </p>
                          <a href="./xiangqingye.html?id=${item.cart_id}" class="buy">快速购买</a>
                      </li>
          `
                })
                ul1.innerHTML = str
            }
        })()
    }
    
}

// 设置人气排序
spans[0].onclick=function(){
   /*  // 获取background属性
    if(this.currentStyle){
        var arrow = this.currentStyle.background
    }else{
        var arrow = window.getComputedStyle(this).background
    }
    var ar1 = arrow.split(" ")
    console.log(ar1) */
    a++
    // 获取输入框中的内容
    var v1 = inps[0].value
    var v2 = inps[1].value;
    // 点击一次为降序
    if(a%2==1){
        
         // 通过ajax来获取数据库信息
        (async function () {
            var txt = await PromiseAjax({
                url: './php/list-renqi.php',
                data: `value1=${v1}&value2=${v2}&sort=asc`
            })  
            // 把传入参数转为数组
            var ar1 = eval("(" + txt + ")")
            // 判断数据是否大于12条
            if (ar1.length > 12) {
                pagination1.style.display = "flex"
                // 配置分页器信息
                var o1 = {
                    pageInfo: {
                        pagenum: 1, //当前显示的页码
                        pagesize: 12, //每页显示的条数
                        totalsize: ar1.length, //总条数
                        totalpage: Math.ceil(ar1.length / 12) //总页数
                    },
                    textInfo: {
                        first: "首页", //首页
                        prev: "上一页", //上一页
                        next: "下一页", //下一页
                        last: "尾页" //尾页
                    }
                }

                new Pagination(pagination1, o1, (m) => {
                    // console.log(m);
                    var ar2 = ar1.slice((m - 1) * 12, m * 12)
                    var str = ""
                    ar2.forEach(item => {
                        str += `
                     <li onmouseover="fn1()"><a href="./xiangqingye.html?id=${item.cart_id}"><img src="${item.goods_img1}" alt=""></a>
                               <a href="#" class="title">
                                   <span>${item.goods_name}</span>
                                   <span>5.5折</span>
                               </a>
                               <p class="price">
                                   <span>￥${item.goods_price}</span>
                               </p>
                               <a href="./xiangqingye.html?id=${item.cart_id}" class="buy">快速购买</a>
                           </li>
               `
                    })
                    ul1.innerHTML = str

                })
            } else {
                pagination1.style.display = "none"
                var str = ""
                ar1.forEach(item => {
                    str += `
                 <li onmouseover="fn1()"><a href="./xiangqingye.html?id=${item.cart_id}"><img src="${item.goods_img1}" alt=""></a>
                           <a href="#" class="title">
                               <span>${item.goods_name}</span>
                               <span>5.5折</span>
                           </a>
                           <p class="price">
                               <span>￥${item.goods_price}</span>
                           </p>
                           <a href="./xiangqingye.html?id=${item.cart_id}" class="buy">快速购买</a>
                       </li>
           `
                })
                ul1.innerHTML = str
            }
        })()
    }else{
        // 通过ajax来获取数据库信息
        (async function () {
            var txt = await PromiseAjax({
                url: './php/list-renqi.php',
                data: `value1=${v1}&value2=${v2}&sort=desc`
            })
            // 把传入参数转为数组
            var ar1 = eval("(" + txt + ")")
            // 判断数据是否大于12条
            if (ar1.length > 12) {
                pagination1.style.display = "flex"
                // 配置分页器信息
                var o1 = {
                    pageInfo: {
                        pagenum: 1, //当前显示的页码
                        pagesize: 12, //每页显示的条数
                        totalsize: ar1.length, //总条数
                        totalpage: Math.ceil(ar1.length / 12) //总页数
                    },
                    textInfo: {
                        first: "首页", //首页
                        prev: "上一页", //上一页
                        next: "下一页", //下一页
                        last: "尾页" //尾页
                    }
                }

                new Pagination(pagination1, o1, (m) => {
                    // console.log(m);
                    var ar2 = ar1.slice((m - 1) * 12, m * 12)
                    var str = ""
                    ar2.forEach(item => {
                        str += `
                    <li onmouseover="fn1()"><a href="./xiangqingye.html?id=${item.cart_id}"><img src="${item.goods_img1}" alt=""></a>
                              <a href="#" class="title">
                                  <span>${item.goods_name}</span>
                                  <span>5.5折</span>
                              </a>
                              <p class="price">
                                  <span>￥${item.goods_price}</span>
                              </p>
                              <a href="./xiangqingye.html?id=${item.cart_id}" class="buy">快速购买</a>
                          </li>
              `
                    })
                    ul1.innerHTML = str

                })
            } else {
                pagination1.style.display = "none"
                var str = ""
                ar1.forEach(item => {
                    str += `
                <li onmouseover="fn1()"><a href="./xiangqingye.html?id=${item.cart_id}"><img src="${item.goods_img1}" alt=""></a>
                          <a href="#" class="title">
                              <span>${item.goods_name}</span>
                              <span>5.5折</span>
                          </a>
                          <p class="price">
                              <span>￥${item.goods_price}</span>
                          </p>
                          <a href="./xiangqingye.html?id=${item.cart_id}" class="buy">快速购买</a>
                      </li>
          `
                })
                ul1.innerHTML = str
            }
        })()
    }
    
}

// 设置新品排序
spans[1].onclick=function(){
    
     a++
     // 获取输入框中的内容
     var v1 = inps[0].value
     var v2 = inps[1].value;
     // 点击一次为降序
     if(a%2==1){
         
          // 通过ajax来获取数据库信息
         (async function () {
             var txt = await PromiseAjax({
                 url: './php/list-new.php',
                 data: `value1=${v1}&value2=${v2}&sort=asc`
             })  
             // 把传入参数转为数组
             var ar1 = eval("(" + txt + ")")
             // 判断数据是否大于12条
             if (ar1.length > 12) {
                 pagination1.style.display = "flex"
                 // 配置分页器信息
                 var o1 = {
                     pageInfo: {
                         pagenum: 1, //当前显示的页码
                         pagesize: 12, //每页显示的条数
                         totalsize: ar1.length, //总条数
                         totalpage: Math.ceil(ar1.length / 12) //总页数
                     },
                     textInfo: {
                         first: "首页", //首页
                         prev: "上一页", //上一页
                         next: "下一页", //下一页
                         last: "尾页" //尾页
                     }
                 }
 
                 new Pagination(pagination1, o1, (m) => {
                     // console.log(m);
                     var ar2 = ar1.slice((m - 1) * 12, m * 12)
                     var str = ""
                     ar2.forEach(item => {
                         str += `
                      <li onmouseover="fn1()"><a href="./xiangqingye.html?id=${item.cart_id}"><img src="${item.goods_img1}" alt=""></a>
                                <a href="#" class="title">
                                    <span>${item.goods_name}</span>
                                    <span>5.5折</span>
                                </a>
                                <p class="price">
                                    <span>￥${item.goods_price}</span>
                                </p>
                                <a href="./xiangqingye.html?id=${item.cart_id}" class="buy">快速购买</a>
                            </li>
                `
                     })
                     ul1.innerHTML = str
 
                 })
             } else {
                 pagination1.style.display = "none"
                 var str = ""
                 ar1.forEach(item => {
                     str += `
                  <li onmouseover="fn1()"><a href="./xiangqingye.html?id=${item.cart_id}"><img src="${item.goods_img1}" alt=""></a>
                            <a href="#" class="title">
                                <span>${item.goods_name}</span>
                                <span>5.5折</span>
                            </a>
                            <p class="price">
                                <span>￥${item.goods_price}</span>
                            </p>
                            <a href="./xiangqingye.html?id=${item.cart_id}" class="buy">快速购买</a>
                        </li>
            `
                 })
                 ul1.innerHTML = str
             }
         })()
     }else{
         // 通过ajax来获取数据库信息
         (async function () {
             var txt = await PromiseAjax({
                 url: './php/list-new.php',
                 data: `value1=${v1}&value2=${v2}&sort=desc`
             })
             // 把传入参数转为数组
             var ar1 = eval("(" + txt + ")")
             // 判断数据是否大于12条
             if (ar1.length > 12) {
                 pagination1.style.display = "flex"
                 // 配置分页器信息
                 var o1 = {
                     pageInfo: {
                         pagenum: 1, //当前显示的页码
                         pagesize: 12, //每页显示的条数
                         totalsize: ar1.length, //总条数
                         totalpage: Math.ceil(ar1.length / 12) //总页数
                     },
                     textInfo: {
                         first: "首页", //首页
                         prev: "上一页", //上一页
                         next: "下一页", //下一页
                         last: "尾页" //尾页
                     }
                 }
 
                 new Pagination(pagination1, o1, (m) => {
                     // console.log(m);
                     var ar2 = ar1.slice((m - 1) * 12, m * 12)
                     var str = ""
                     ar2.forEach(item => {
                         str += `
                     <li onmouseover="fn1()"> <a href="./xiangqingye.html?id=${item.cart_id}"><img src="${item.goods_img1}" alt=""></a>
                               <a href="#" class="title">
                                   <span>${item.goods_name}</span>
                                   <span>5.5折</span>
                               </a>
                               <p class="price">
                                   <span>￥${item.goods_price}</span>
                               </p>
                               <a href="./xiangqingye.html?id=${item.cart_id}" class="buy">快速购买</a>
                           </li>
               `
                     })
                     ul1.innerHTML = str
 
                 })
             } else {
                 pagination1.style.display = "none"
                 var str = ""
                 ar1.forEach(item => {
                     str += `
                 <li onmouseover="fn1()"><a href="./xiangqingye.html?id=${item.cart_id}"><img src="${item.goods_img1}" alt=""></a>
                           <a href="#" class="title">
                               <span>${item.goods_name}</span>
                               <span>5.5折</span>
                           </a>
                           <p class="price">
                               <span>￥${item.goods_price}</span>
                           </p>
                           <a href="./xiangqingye.html?id=${item.cart_id}" class="buy">快速购买</a>
                       </li>
           `
                 })
                 ul1.innerHTML = str
             }
         })()
     }
     
 }
 

